import { ReactComponent as BankIcon } from "../../../../../../assets/images/dm-favicon.svg";
import { ReactComponent as ClientIcon } from "../../../../../../assets/images/dm-user.svg";

import classes from "./AvatarItem.module.scss";

const AvatarItem = ({ lastName, firstName, middleName, role }) => {
  const isBankEmployee = role === 0 || role === 1 || role === 2;

  const fioClient = `${lastName} ${firstName?.slice(0, 1)}  ${middleName?.slice(
    0,
    1
  )} `;

  return (
    <div className={classes["request-message-header-avatar-block"]}>
      <div
        className={`${classes["request-avatar"]} ${
          isBankEmployee
            ? classes["request-avatar-bank"]
            : classes["request-avatar-client"]
        }`}
      >
        {isBankEmployee ? (
          <BankIcon />
        ) : (
          <ClientIcon className={`${classes["request-avatar-icon"]}`} />
        )}
      </div>
      <h2 className="card-title ml-10">
        {isBankEmployee ? "Специалист банка" : fioClient}
      </h2>
    </div>
  );
};

export default AvatarItem;